<template>
  <div class="tags-container">
    <h1>标签云</h1>
    <div class="tags-cloud">
      <router-link v-for="tag in tags"
                   :key="tag.name"
                   :to="{ path: '/articles', query: { tag: tag.name }}"
                   class="tag"
                   :style="{ 
          fontSize: `${tag.size}rem`,
          opacity: tag.opacity 
        }">
        #{{ tag.name }}
        <span class="tag-count">({{ tag.count }})</span>
      </router-link>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const tags = ref([
  { name: 'Vue3', count: 5, size: 2.0, opacity: 1 },
  { name: 'JavaScript', count: 8, size: 2.2, opacity: 0.9 },
  { name: 'Three.js', count: 3, size: 1.8, opacity: 0.8 },
  { name: 'CSS', count: 6, size: 1.9, opacity: 0.85 },
  { name: 'HTML', count: 4, size: 1.7, opacity: 0.75 },
  { name: 'WebGL', count: 2, size: 1.6, opacity: 0.7 },
  { name: '前端开发', count: 10, size: 2.4, opacity: 1 },
  { name: '性能优化', count: 4, size: 1.8, opacity: 0.8 },
]);
</script>

<style scoped>
.tags-container {
  max-width: 1200px;
  margin: 100px auto;
  padding: 2rem;
  color: #fff;
}

h1 {
  text-align: center;
  margin-bottom: 3rem;
  font-size: 2.5rem;
  background: linear-gradient(45deg, #fff, #88ccff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.tags-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  backdrop-filter: blur(10px);
}

.tag {
  color: #fff;
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.tag:hover {
  transform: scale(1.1);
  background: rgba(255, 255, 255, 0.2);
}

.tag-count {
  font-size: 0.8em;
  opacity: 0.7;
}

@media (max-width: 768px) {
  .tags-container {
    margin: 80px auto;
    padding: 1rem;
  }
  
  h1 {
    font-size: 2rem;
  }
  
  .tags-cloud {
    padding: 1rem;
  }
}
</style> 